<@>layout("/common/default.html"){
<link rel="stylesheet" href="${ctxPath}/static/zTree3.5/css/demo.css" type="text/css">
<link rel="stylesheet" href="${ctxPath}/static/zTree3.5/css/metroStyle/metroStyle.css" type="text/css">
<script type="text/javascript" src="${ctxPath}/static/zTree3.5/js/jquery.ztree.all.js"></script>
<script type="text/javascript" src="${ctxPath}/static/zTree3.5/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${ctxPath}/static/zTree3.5/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="${ctxPath}/static/zTree3.5/js/jquery.ztree.exedit.js"></script>
<style>
    div#menubody {
        padding: 10px;
        line-height: 800px;
        text-align: center;
        background-color: white;
        border: 1px solid silver;
        padding: 3px 20px 3px 3px;
        color: #fff;
    }

    div#edit-div {
        margin-left: 0px;
        padding: 10px;
        text-align: center;
        padding: 15px 20px 20px 20px;
        background-color: white;
        border: 0px solid silver;
    }

    div#qx_menu ul li {
        margin: 1px 0;
        padding: 0 5px;
        cursor: pointer;
        list-style: none outside none;
        border: 1px solid #617775;
        background-color: #DFDFDF;
    }

    ul#menu-tree {
        margin: 0;
        padding: 8px;
        color: #E9E7E7;
        background-color: white;
        font-size: 17px;
        height: auto;
        width:100%;
        border: 0px;
        overflow-y:auto;
    }

    li {
        padding: 6px;
    }

    span {
        list-style: none;
        text-align: left;
        white-space: nowrap;
    }

    .ztree * {
        font-size: 15px;
    }
</style>

<input type="hidden" name="roleId" value="${roleId}" id="roleId">
<div class="layui-fluid" style="padding-top:5px ">
    <div class="layui-row">
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-body" id="menubody">
                    <!--ztree-->
                    <ul id="menu-tree" class="ztree" ></ul>
                </div>
                <div  id="edit-div" style="top:5px;right: 20px;position: absolute">
                    <button type="button"  style="" class="layui-btn" onclick="savemenuchoose()">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script>
    var menuTree;
    var rMenu = $("#qx_menu");
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pid"
            },
            key: {
                name: "name"
            }
        },
        check: {
            enable: true,
            chkStyle: "checkbox",
            autoCheckTrigger: true,
            chkboxType: {"Y": "ps", "N": "ps"}
        },
        callback: {
            onClick: function () {

            },
            onRigetClick: function () {

            },
            onExpand: zTreeOnExpand,
            onCollapse:zTreeOnExpand
        }
    };

    $(function () {
        var roleId = $('#roleId').val();
        $.cajax('${ctxPath}/ajax/userpermission/menu/rolemenutree', {
            roleId: roleId
        }, function (r) {
            var code = r.code;
            var msg = r.msg;
            if (code == '1') {
                var menuNodes = r.datas;
                menuTree = $.fn.zTree.init($("#menu-tree"), setting, menuNodes);
                rMenu = $('#qx_menu');
                var index = parent.layer.getFrameIndex(window.name);
                var treeHeight = $('#menubody').height();
                parent.layer.style(index, {
                    width: '600px',
                    height: treeHeight +80
                });
            } else {
                $.msg(msg, function () {
                }, 2);
            }
        });
    })
//保存
    function savemenuchoose() {
        var roleId = $('#roleId').val();
        var treeObj = $.fn.zTree.getZTreeObj("menu-tree");
        console.log(treeObj);
        var checked = treeObj.getCheckedNodes(true);
        var menuIds = "";
        for (var i = 0; i < checked.length; i++) {
            var checknode = checked[i];
            var menuId = checknode.id;
            if (menuId) {
                menuIds = menuIds + menuId + ",";
            }
        }
        if (menuIds) {
            menuIds = menuIds.substring(0, menuIds.length - 1);
            $.cajax('${ctxPath}/ajax/role/rolemenusave', {
                'menuIds': menuIds,
                'roleId': roleId
            }, function (r) {
                var code = r.code;
                var msg = r.msg;
                if (code == 1) {
                    $.msg(msg, function () {
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    }, code);
                } else {
                    $.msg(msg, function () {

                    }, 2)
                }
            });
        }
    }

    function zTreeOnExpand(event, treeId, treeNode) {
            var index = parent.layer.getFrameIndex(window.name);
            var treeHeight = $('#menubody').height();
            parent.layer.style(index, {
                width: '600px',
                height: treeHeight +80
            });
    };
</script>
<@>}